$(function () {
    // 验证姓名
    $('[name="name"]').change(function () {
        let name = $('[name="name"]').val();
        let reg1 = /^[a-zA-Z_]([a-zA-Z0-9_]+)?$/;
        if (!reg1.test(name)) {
            $('[name="nameSpan"]').html('<span style="color:black">请输入大小写字母、数字或者下划线</span>')
            return;
        } else {
            $('[name="nameSpan"]').html('')
        }
    })
    // 保存按钮点击事件
    $('[name="save"]').click(function () {
        // 获取 localStorage 中的数据信息 
        let dataObj = window.localStorage.getItem('data');
        // console.log(dataObj);
        let detailObj = {};

        if (dataObj === null) {
            let name = $('[name="name"]').val();
            let phone = $('[name="phone"]').val();
            let EB = $('[name="EB"]').val();
            let age = $('[name="age"]').val();
            let salary = $('[name="salary"]').val();

            detailObj.name = name;
            detailObj.phone = phone;
            detailObj.EB = EB;
            detailObj.age = age;
            detailObj.salary = salary;

            window.localStorage.data = JSON.stringify([detailObj])
        } else {
            dataObj = JSON.parse(dataObj);
            if (dataObj.length === 0) {
                let name = $('[name="name"]').val();
                let phone = $('[name="phone"]').val();
                let EB = $('[name="EB"]').val();
                let age = $('[name="age"]').val();
                let salary = $('[name="salary"]').val();

                detailObj.name = name;
                detailObj.phone = phone;
                detailObj.EB = EB;
                detailObj.age = age;
                detailObj.salary = salary;

                dataObj.unshift(detailObj);
                window.localStorage.data = JSON.stringify(dataObj);
            } else {
                let bool = dataObj.some(function (item) {
                    return item.phone === detailObj.phone;
                })

                // console.log(bool);

                if (bool) {
                    // console.log(dataObj);
                    window.alert('当前信息已存在，请检查后重新输入');
                } else {
                    let name = $('[name="name"]').val();
                    let phone = $('[name="phone"]').val();
                    let EB = $('[name="EB"]').val();
                    let age = $('[name="age"]').val();
                    let salary = $('[name="salary"]').val();

                    detailObj.name = name;
                    detailObj.phone = phone;
                    detailObj.EB = EB;
                    detailObj.age = age;
                    detailObj.salary = salary;

                    dataObj.unshift(detailObj);
                    window.localStorage.data = JSON.stringify(dataObj);
                }
            }
        }
        setPage();
    })
})

async function setPage() {
    let data1 = window.localStorage.getItem('data');
    data1 = JSON.parse(data1);
    console.log(data1);

    if (data1.length === 0) {
        $('[name="tbody"]').html('<tr><td>没有匹配的数据</td></tr>');
        return;
    }
    let str = '';
    data1.forEach(function (item, index) {
        str += `
        <tr>
            <td>${item.name}</td>
            <td>${item.phone}</td>
            <td>${item.EB}</td>
            <td>${item.age}</td>
            <td>${item.salary}</td>
            <td>
                <button name="change" key="index" ><span style=background:green >修改</span></button>
                <button name="del" key="index"><span style=background:red>删除</span></button>
            </td>
        </tr>    
    `
    })
    $('[name="tbody"]').html(str);
}

// 删除按钮点击事件
setPage();
const oTbody = document.querySelector('[name="tbody"]');
oTbody.addEventListener('click', function (event) {
    let data2 = window.localStorage.getItem('data');
    data2 = JSON.parse(data2);
    if (event.target.getAttribute('name') === 'del') {
        if (!window.confirm('您确定删除吗?')) return;
        data2.splice(Number(event.target.getAttribute('index')), 1);
        console.log(data2);
        window.localStorage.data = JSON.stringify(data2);
        setPage();
    }
})




